<template>
	<div v-if="Try_out_dialogVisible" class="dialog-mask">
		<div style="position: relative;">
			<img class="base_img" src="../assets/try_out_background.png" alt="" width="320" height="340" />
			<div class="content-box">
				<div class="close_icon" @click="close_dialog"><el-icon size="26"><CircleClose /></el-icon></div>
				<div class="top_bottom_margin title_box">试用已结束</div>
				<p class="top_bottom_margin">如需继续使用,请进行购买</p>
				<img src="../assets/try_out_canvas.png" alt="" width="100%"/>
				<div class="try_out_canvas_div">
					<p style="color: #ff850b;">新用户限时福利</p>
					<p class="flex_center_center"><img src="../assets/fire.png" width="20" height="20" />任意套餐首购 <span style="color: #ff8409;font-size: 20px;font-weight: 900;">&nbsp;75折</span></p>
					<p style="color: #888fa7;">(限1台设备)</p>
				</div>
				<div class="button_box">
					<button @click="$router.push('/Purches/0')">立即购买</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Try_out_dialog',
		props: {
			"Try_out_dialogVisible": { //接收父组件传参控制弹框是否显示
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				
			};
		},
		methods:{
			close_dialog(){
				this.$emit('update:Try_out_dialogVisible', false)
				const Userdata_obj = JSON.parse(JSON.stringify(this.$store.state.Userdata));
				Userdata_obj.showTrialFinished = false;
				this.$store.commit('localStorage_userdata', Userdata_obj);
			}
		}
	}
</script>

<style lang="less" scoped>
	.dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: opacity 0.3s ease;
	}

	.base_img {
		border-radius: 20px;
	}
	.close_icon{
		position: absolute;
		top: -20px;
		right: 20px;
		cursor: pointer;
	}
	.top_bottom_margin{
		margin: 10px 0;
	}
	.title_box{
		color: #fd5151;
		font-size: 24px;
		font-weight: 900;
	}
	.content-box{
		position: absolute;
		top: 40px;
		width: 100%;
		text-align: center;
		padding: 0 20px 20px 20px;
		box-sizing: border-box;
	}
	.try_out_canvas_div{
		position: absolute;
		top: 30%;
		width: calc(100% - 40px);
		text-align: center;
		p{
			margin: 15px 0;
		}
	}
	.button_box{
		margin: 10px 0;
		button{
			width: 100%;
			color: #fff;
			background-color: #0079f2;
			border-radius: 20px;
			padding: 15px 0;
			border: none;
			cursor: pointer;
		}
	}
</style>